<!DOCTYPE html>
<html>
<head>
<title>车场管理</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/aaa.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BK1nKL02Lul9X8RURxIvqGhORqsGigsB"></script>
<style type="text/css">
#l-map {
	height: 500px;
	width: 100%;
}
#r-result {
	width: 60%;
}
.mymodal {
	width: 60%;
}
</style>
</head>

<body>
<img calss="img-responsive" width="100%" src="image/head.jpg" />
<div class="container">
  <div class="row">
    <div class="span12">
      <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid"> 
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a class="navbar-brand" href="#">后台管理</a> </div>
          
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="#">订单管理</a></li>
              <li><a href="#">今日揽件路径规划</a></li>
              <li><a href="#">今日派送路径规划</a></li>
              <li  class="active"><a href="#">车场管理</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">注销</a></li>
              <li>
                <h4><span class="label label-success">日期</span></h4>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse --> 
        </div>
        <!-- /.container-fluid --> 
      </nav>
      <div class="panel-body">
        <table class="table table-condensed">
          <thead>
            <tr>
              <th>车场编号</th>
              <th>经度</th>
              <th>纬度</th>
              <th>状态</th>
              <th> <button class="btn btn-success" data-toggle="modal" data-target="#myModal">增加车场</button>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
              <td><a href="#" class="btn btn-warning btn-xs" >启用车场</a> <a href="#" class="btn btn-danger btn-xs">删除车场</a></td>
              <iframe id="tmp_downloadhelper_iframe" style="display: none;"></iframe>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <td>3</td>
              <td colspan="2">Larry the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
      <br>
      <br>
    </div>
  </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog mymodal">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">增加车场</h4>
      </div>
      <div class="modal-body">
        <div class="modal-body"> <br>
          地址：
          <input type="text" id="suggestId" value="" style="width:60%;">
          <br>
          <div id="l-map"> </div>
        </div>
      </div>
      <div class="modal-footer">
        <form>
          <input type="hidden" id="pLNG" name="pLNG">
          <input type="hidden" id="pLAT" name="pLAT">
          <input type="submit" value="添加车场" class="btn btn-success">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="btn-toolbar col-lg-4 col-lg-offset-4" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>
<div id="foot" class=" row navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="col-md-12"> <span style="color:#f1f4f5;">_</span>
    <div>
      <div class="col-md-6 col-md-offset-1">
        <p>© 2016. All RIGHT RESERVED. 玛德菲快递有限公司 版权所有 粤ICP备879453134号</p>
      </div>
      <div class="col-md-4">
        <p> 客服服务热线：25041，020-88877766</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
	$('#myModal').on('shown.bs.modal', function () {
  	// 执行一些动作...
	init();
	})
	function init() {
		var map = new BMap.Map("l-map");
		var point = new BMap.Point(113.275995, 23.117055);
		map.centerAndZoom(point,12);                   // 初始化地图,设置城市和地图级别。
		map.enableScrollWheelZoom();
		var ppmarker = new BMap.Marker(point);
		ppmarker.setAnimation(BMAP_ANIMATION_BOUNCE);
		map.addOverlay(ppmarker);    //添加标注
		ppmarker.enableDragging();
		var geoc = new BMap.Geocoder();  
		ppmarker.addEventListener("dragend",overlay_style);
		geoc.getLocation(ppmarker.point, function(rs){
			var addComp = rs.addressComponents;
			document.getElementById("suggestId").value=
			addComp.province + addComp.city  + addComp.district  + addComp.street + addComp.streetNumber;
			});
		$("#pLNG").val(ppmarker.point.lng);
		$("#pLAT").val(ppmarker.point.lat);                //启用滚轮放大缩小
		function overlay_style(e){
				  var p = e.target.point;
				  geoc.getLocation(p, function(rs){
				  var addComp = rs.addressComponents;
				  document.getElementById("suggestId").value=
				  addComp.province + addComp.city  + addComp.district  + addComp.street + addComp.streetNumber;
				  $("#pLNG").val(p.lng);
				  $("#pLAT").val(p.lat);
			});
		 }
		
	}  
	
		
</script>